<template>
	<div class="">
		<Select @on-change="changeP" v-model="currentCode">
			<Option 
				v-for="item in permissions" :value="item.code" 
				v-if="(item instanceof Object) && (item.type === 'M' || item.type === 'P' || item.type === 'D')">
				{{CONST.getPermissionTypeName(item.type).name}}-{{item.name}}
			</Option>
		</Select>
		<div v-if="childFlg" class="ml-4">
			<permission-selected @selected="getCode" :permissions="currentSelectedPermission.permissions"></permission-selected> 
		</div>
	</div>
</template>

<script>
	export default {
		name: "permission-selected",
		props: {
			permissions: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			current: function() {
				return this.store.state.currentUser;
			},
		},
		data: function() {
			return {
				childFlg: false,
				currentSelectedPermission: {
					
				},
				currentCode: "",
			}
		},
		created: function(){
			this.init();
		},
		methods: {
			init: function() {
				for (let index in this.permissions) {
					let item = this.permissions[index];
					if (item.selected === true) {
						this.currentCode = item.code;
						this.childFlg = true;
						this.currentSelectedPermission = item;
					}
				}
			},
			getCode: function(code) {
				this.$emit("selected", code);
			},
			changeP: function(currentCode) {
				this.childFlg = false;
				this.currentSelectedPermission = {};
				this.$emit("selected", currentCode);
				
				for (let index in this.permissions) {
					let item = this.permissions[index];
					if (item.code === (currentCode)) {
						if (item.permissions && item.permissions.length > 0) {
							
							setTimeout(() => {
								this.currentSelectedPermission = item;
								this.childFlg = true;
							}, 30);
							
							
							
							break;
						}
						
					}
				}
			}
		},
	}
</script>

<style>
</style>